<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PhotoSphereViewer - autorotate keypoints demo</title>

  <link rel="stylesheet" href="../dist/photo-sphere-viewer.css">
  <link rel="stylesheet" href="../dist/plugins/markers.css">

  <style>
    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin: 0;
      padding: 0;
    }

    #photosphere {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>

<div id="photosphere"></div>

<script src="../node_modules/three/build/three.js"></script>
<script src="../node_modules/promise-polyfill/dist/polyfill.js"></script>
<script src="../node_modules/uevent/browser.js"></script>
<script src="../dist/photo-sphere-viewer.js"></script>
<script src="../dist/plugins/autorotate-keypoints.js"></script>
<script src="../dist/plugins/markers.js"></script>

<script>

  const PSV = new PhotoSphereViewer.Viewer({
    container      : 'photosphere',
    panorama       : 'sphere.jpg',
    caption        : 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
    loadingImg     : 'assets/photosphere-logo.gif',
    autorotateSpeed: '4rpm',
    autorotateDelay: 1000,
    navbar         : [
      'autorotate',
      'zoom',
      {
        title  : 'Change points',
        content: '🔄',
        onClick: randomPoints,
      },
      'caption',
      'fullscreen',
    ],
    plugins        : [
      PhotoSphereViewer.AutorotateKeypointsPlugin,
      PhotoSphereViewer.MarkersPlugin,
    ],
  });

  var markers = PSV.getPlugin(PhotoSphereViewer.MarkersPlugin);
  var autorotate = PSV.getPlugin(PhotoSphereViewer.AutorotateKeypointsPlugin);

  PSV.once('ready', randomPoints);

  function randomPoints() {
    const points = [];

    for (let i = 0, l = Math.random() * 2 + 4; i < l; i++) {
      points.push({
        position: {
          longitude: (i + Math.random()) * 2 * Math.PI / l,
          latitude : Math.random() * Math.PI / 3 - Math.PI / 6,
        },
        pause   : i % 3 === 0 ? 2000 : 0,
        tooltip : 'Test tooltip',
      });
    }

    markers.setMarkers(points.map((pt, i) => ({
      id       : '#' + i,
      latitude : pt.position.latitude,
      longitude: pt.position.longitude,
      image    : 'assets/pin-red.png',
      width    : 32,
      height   : 32,
      anchor   : 'bottom center',
    })));

    autorotate.setKeypoints(points);
  }
</script>
</body>
</html>
